<template>
  <top-blank-new></top-blank-new>
  <top-common title-content="支付确认" @backPage="backPage"></top-common>
  <view>
    <view class="content">
      <view v-if="state" class="title">
        <view class="lie1">配件使用</view>
        <view class="lie2">配件列表</view>
      </view>
      <!-- <view v-else class="title">
				<view class="">
					配件使用
				</view>
				<view class="lie">
					配件列表
				</view>
			</view> -->

      <view class="">
        <view class="item" v-for="(item, index) in priceArray">
          <view class="">{{ item.name }}</view>
          <view class="">￥{{ item.price }}</view>
        </view>
        <view class="serveAmount">
          <view class="">总计</view>
          <view class="">￥{{ allPrice }}</view>
        </view>
      </view>
    </view>
    <button @click="payConfirm" class="payConfirmClass">支付确认</button>
    <!-- <u-button class="custom-style" type="primary" size="normal" text="支付确认" @click="payConfirm"></u-button> -->
  </view>
</template>

<script>
import { updateOrderStatusAPI } from '@/api/authenticationApi.js';
import { getorderPartAPI } from '@/api/equipment.js';
import config from '@/config.js';
export default {
  data() {
    return {
      state: true,
      orderId: '',
      record: {},
      priceArray: [],
      allPrice: 0
    };
  },
  methods: {
    backPage() {
      uni.redirectTo({
        url: '/pages/order-list/order-list?index=0'
      });
    },
    init() {
      this.getOrderPart();
    },
    async payConfirm() {
      try {
        const res = await updateOrderStatusAPI(this.orderId);
        setTimeout(() => {
          uni.showToast({
            title: '支付成功',
            icon: 'success',
            success() {
              uni.redirectTo({
                url: '/pages/order-list/order-list?index=0'
              });
            }
          });
        }, 10);
      } catch (e) {
        //TODO handle the exception
      }
    },
    //配件数据
    async getOrderPart() {
      let that = this;
      const res = await getorderPartAPI(this.orderId);
      this.priceArray = res.data.data.records.map(i => {
        return {
          price: i.amount * i.part.price,
          name: i.part.name
        };
      });
      this.allPrice = this.priceArray.reduce((sum, i) => {
        return sum + i.price;
      }, 0);
      // uni.request({
      //   url: `${config.baseURL}/orderPart/get/${that.orderId}/page/${1}`,
      //   success(res) {
      //     console.log(res, 'resssssssss');
      //     // that.Part = res.data.data;
      //     // console.log('====', that.Part.records);
      //     that.priceArray = res.data.data.records.map(i => {
      //       return {
      //         price: i.amount * i.part.price,
      //         name: i.part.name
      //       };
      //     });
      //     that.allPrice = that.priceArray.reduce((sum, i) => {
      //       return sum + i.price;
      //     }, 0);
      //     console.log('[][][]', that.priceArray);
      //     console.log('----', this.allPrice);
      //     // if (res.data.records.length === 0) {

      //     // }
      //   }
      // });
    }
  },
  onLoad() {
    uni.$on('order', data => {
      this.record = JSON.parse(data);
      this.orderId = JSON.parse(data).id;
      this.init();
    });
  }
};
</script>

<style lang="scss">
page {
  background-color: #333333;
}

// .custom-style {
// 	width: 95%;
// 	margin-top: 20px;
// 	border-radius: 30rpx;
// 	background: #ffb612;
// 	border: none;
// }

.payConfirmClass {
  background-color: #ffb612;
  margin: 20rpx;
  color: white;
}

.content {
  background: rgb(79, 79, 79);
  margin: 10px 5px 0px;
  display: flex;
  flex-direction: column;
  border-radius: 30rpx;
  border-left: 4rpx solid #ffb612;
  border-right: 4rpx solid #ffb612;
  padding: 10px;

  .title {
    // color:#ffb612;
    font-size: 18px;
    font-weight: bold;
    border-bottom: 1px solid #ffb612;
    padding: 10px 0;

    .lie {
      color: rgb(205, 205, 205);
      padding: 10px;
      font-size: 15px;
    }

    .lie1 {
      color: #ffb612;
      padding: 10px;
      font-size: 20px;
    }

    .lie2 {
      color: #cecece;
      padding: 10px;
      font-size: 15px;
    }
  }

  .item {
    color: rgb(205, 205, 205);
    display: flex;
    justify-content: space-between;
    padding: 10px;
  }

  .serveAmount {
    color: #ffb612;
    display: flex;
    justify-content: space-between;
    padding: 10px;
  }
}
</style>
